<template>
<div class="mine-container">
    <img class="mine-title-bg" :src="userInfo.headimgurl">
    <div class="mine-course-wrap">
       <div class="course-content">
           <img :src="userInfo.headimgurl">
           <ul class="tab-box">
              <li class="my-course" :class="{'is-active':tabIndex==0}" @click="changeTab(0)">我的课程</li>
              <li class="my-activity"  :class="{'is-active':tabIndex==1}" @click="changeTab(1)">我的活动</li>
              <li class="my-story"  :class="{'is-active':tabIndex==2}" @click="changeTab(2)">我的故事</li>
           </ul>
       </div>
       <div class="course-list" v-show="tabIndex==0">
           <ul>
              <li v-for="item in activityList" 
                v-link="{name:'activity.successful',query:{ orderId:item.order_id }}">
                 <img :src="item.cover_img[0]">
                 <div class="course-info">
                    <h3>{{item.title}}</h3>
                    <span class="time">{{item.start_time}}</span>
                    <span class="addr">{{item.location}}</span>
                 </div>
                 <!-- <span class="activity-status">未使用</span> -->
              </li>
           </ul>
       </div>
       <div class="course-list activity-list" v-show="tabIndex==1">
           <ul>
              <li v-for="item in freeActivityList" 
                v-link="{name:'activity_volunteer.success',params:{activityId:item.id}}">
                 <img :src="item.cover_img[0]">
                 <div class="course-info">
                    <h3>{{item.title}}</h3>
                    <span class="time">{{item.start_time}}</span>
                    <span class="addr">{{item.location}}</span>
                 </div>
                 <!-- <span class="activity-status">未使用</span> -->
              </li>
           </ul>
       </div>
       <div class="story-list" v-show="tabIndex==2">
         <stories-list
           v-ref:storiesList
           :list="storyList">
         </stories-list>
         <div class="fixed-tools-wrap">
           <div class="fixed-tools button-groups">
             <button class="btn btn-primary " v-link="{name:'mine.writing'}">发布故事</button>
           </div>
         </div>
       </div>
   </div>
</div>
</template>

<script>
    import {
      MY_ACTIVITY,
      MY_FREE_ACTIVITY,
      MY_STORY_LIST,
      USER_INFO
    } from '../../api';
   import StoriesList from "../../components/stories";

    export default {
        data(){
            return{
                mineCourse:true,
                mineActivity:false,
                mineStory:false,
                tabIndex:0,
                activityList:[],
                freeActivityList:[],
                storyList:[],
                userInfo:{}
            }
        },
        methods:{
            changeTab(index){
              this.tabIndex = index;
            },
            getActivity(){
              const {begin,end} = this;
              this.$http.get(MY_ACTIVITY,{
                begin,
                end
              })
              .then(res =>{
                  if(res.data.code ==0){
                    this.activityList = res.data.data;
                  }else{
                    this.$toast.show(res.data.message);
                  }
              })
            },
            getFreeActivityList(){
              const {begin,end} = this;
              this.$http.get(MY_FREE_ACTIVITY,{
                begin,
                end,
              })
              .then(res =>{
                  if(res.data.code ==0){
                    this.freeActivityList = res.data.data;
                  }else{
                    this.$toast.show(res.data.message);
                  }
              })
            },
            getStoryList(){
              const {begin,end} = this;
              this.$http.get(MY_STORY_LIST,{
                begin,
                end,
              })
              .then(res =>{
                  if(res.data.code ==0){
                    this.storyList = res.data.data;
                  }else{
                    this.$toast.show(res.data.message);
                  }
              })
            },
            getUserInfo(){
              const {begin,end} = this;
              this.$http.get(USER_INFO)
              .then(res =>{
                  if(res.data.code ==0){
                   this.userInfo = res.data.data;
                  }else{
                    this.$toast.show(res.data.message);
                  }
              })
            }
        },
        ready(){
            this.getActivity();
            this.getFreeActivityList();
            this.getStoryList();
            this.getUserInfo();
        },
        components:{
          StoriesList
        }
    }
</script>
<style lang="sass" scoped>
     @import "../../sass/mine.scss";
     .fixed-tools-wrap{
        height: $rem*120;
     }
     .fixed-tools{
        position: fixed;
        bottom: 0;
        left:0;
        width:100%;
        background: #fff;
        height:$rem*120;
        line-height:$rem*120;
        padding-left:$rem*20;
        color:#666;
        font-size: $rem*28;
        text-align: center;
        .btn-primary{
          height:$rem*80;
          border-radius: $rem*10;
          width:$rem*200;
        }
     }
     .tab-box{
        &.is-active{
            border-bottom: 2px solid #C52B3E;
        }
     }
</style>
